<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{login.title}"></title>
    <script th:inline="javascript">
        $(function () {
            $("#login-sumbit-id").click(function () {
                var flag =  $(".form-control").checkDom()
                if(!flag){
                    return
                }
                $("#login-form-id").submit()
            })

            // 可选：添加注册按钮点击事件的日志输出
            $("#register-btn-id").click(function() {
                console.log("注册按钮被点击，跳转到注册页面");
            });
        })
    </script>
    <style>
        body{
            display: flex;
            flex-direction: column;
        }
        body >header {
            display: flex;
            width: 100%;
            justify-content: space-between;
            padding: 10px;
            align-items: center;
            height: 100px;
        }

        body > header >img{
            height: 80px
        }

        body > header >nav{
            width: 150px;
            display: flex;
            justify-content: space-between;
            padding-right: 20px;
        }
        body > article{
            flex-grow: 1;
            background-color: #c8efe7;
            width: 100%;
            display: flex;
            align-items: center;
        }
        body > article >section{
            flex-grow: 1;
            display: flex;

        }
        body > article >form{
            flex-basis: 300px;
            margin-right: 30px;
        }
        #login-sumbit-id{
            width: 100%;
        }
        #register-btn-id{
            width: 100%;
            margin-top: 10px;
        }

    </style>
</head>
<body>
<header>
    <img th:if="${session.lang} eq 'en'" th:src="@{/assets/images/logo_en.png}">
    <img th:unless="${session.lang} eq 'en'" th:src="@{/assets/images/logo_zh.png}">
    <nav>
        <a th:href="@{/login/login(lang=en)}" th:text="#{login.english}"></a>
        <a th:href="@{/login/login(lang=zh)}" th:text="#{login.chinese}"></a>
    </nav>
</header>
<article>
    <section>
        <img th:src="@{/assets/images/pic.png}">
    </section>

    <form id="login-form-id" method="post" action="verification">
        <div class="form-group">
            <span th:text="#{login.user.name}"></span>
            <input class="form-control" name="username"
                   th:placeholder="#{login.user.name.plch}"
                   th:title="#{login.user.name.plch}"
                   pattern="^.{4,}$">
        </div>

        <div class="form-group">
            <span th:text="#{login.user.password}"></span>
            <input class="form-control" name="password" type="password"
                   th:placeholder="#{login.password.plch}"
                   th:title="#{login.password.plch}"
                   pattern="^.{6,}$">
        </div>

        <a id="login-sumbit-id" class="btn btn-success btn-group-lg" href="#" th:text="#{login.submit}"></a>
        <!-- 修改注册按钮链接，确保与RegisterController的@RequestMapping("/register")匹配 -->
        <a id="register-btn-id" class="btn btn-primary btn-group-lg" th:href="@{/register}" th:text="#{register.title}"></a>
    </form>
</article>
</body>
</html>